<template>
    <div class="backgroundLogin" >
    <div class="login_div">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="demo-ruleForm">
            <el-form-item label="账号" prop="username">
                <el-input v-model="ruleForm.username" placeholder="请输入账号" ></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input  v-model="ruleForm.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>

            <el-button type="primary" class="but" @click="submitLogin">登录</el-button>
        </el-form>     
    </div>
  </div>
</template>

<script>
import axios from '../api/index'

export default {
    data() {
        return {
            ruleForm: {
                username: '',
                password: '',
                token:'这是token存储在vueX中的数据'
            },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                        { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_-]{4,20}$/, message: '以字母开头，长度在4-20之间， 只能包含字符、数字和下划线', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_-]{4,20}$/, message: '以字母开头，长度在4-20之间， 只能包含字符、数字和下划线', trigger: 'blur' }
                    ]
                }
            
        }
    },
    methods:{
        submitLogin(){
            var userInfo = {name:this.ruleForm.username,password:this.ruleForm.password}
            axios.postRequest('/user/login',userInfo)
                .then(res =>{
                    if(res.data.code === 200 && res.data.data != null ){     
                        this.$message({
                            type: 'success',
                            message: '登录成功！'
                        })
                        sessionStorage.setItem('userinfo', JSON.stringify(res.data.data ));
                        this.$router.push('/Home/radioAndProgram')
                    }
                    else if(res.data.code ===201){
                        this.$message({
                            type: 'error',
                            message: '登录失败,用户名或密码输入不正确！'
                        })
                    }
                    else if(res.data.code ===500 ){
                        this.$message({
                            type: 'error',
                            message: '登录失败！原因'+res.data.message
                        })
                    }
            })
        }
    }
}
</script>

<style scoped>
   .demo-ruleForm{
  width: 300px;
  height: 300px;
  padding-top: 10%;
  padding-left: 15%;
}
el-input{
    width: 200px;
}
.d{
 margin-top: 10px;
}
.but{
  width: 253px;
  margin-left: 16%;
  margin-top: 1%;
}

body, hr, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p {
  padding: 0;
  margin: 0;
}

.login_div{
    width: 450px;
    height: 250px;
    background-color: #FFFFFF;
    margin: auto;
    margin-top: 10%;
}
.backgroundLogin{
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('../assets/17-1.jpg');
    background-attachment: fixed;
    background-size: auto 100%;
    margin-top: -22px;
}
</style>